<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <p>{{count}}</p>
            <button @click="addCount">点击</button>
        </div>
        <hr>
        <prop-test :count="count" @update:count="updateCountHandler"></prop-test>
        <!-- <prop-test :count.sync="count"></prop-test> -->
        <!-- <prop-test v-model="count"></prop-test> -->
    </div>
</body>
<script>


    var { createApp } = Vue;

    var app = createApp({
        setup(){
            var {ref} = Vue;
            
            let count = ref(1);
            let addCount = ()=>{
                count.value ++;
            }
            let updateCountHandler = (v)=>{
                count.value = v;
            }

            return {
                count:count,
                addCount,
                updateCountHandler
            }
        }
    })

    
    app.component("prop-test", {
        // 选项式写法
        props: ["count"],
        emits:["update:count"],
       
        setup(props){ // 先接收 在传入到setup函数中

            // let {defineProps} = Vue;
            // let props = defineProps(["count"]);
            // console.log(1111111, props);
            
            console.log(1111111, props);

            return {
                props
            };
        },
        // template: `<div @click="$emit('update:modelValue',count+1)">这是一个测试组件:{{count}}</div>`,
        template: `<div>
            <input :value="count" @input="$emit('update:count', $event.target.value)">
            <span>{{count}}</span>
            </div>`,
    })


    
    console.log(app);
    app.mount("#app");
   
   
  

</script>

</html>